<template>
    <div class="register">
        <div class="re-menu">
            <ul class="dev-width">
                <li :class='step==0?"active":""'>
                    <i class="iconfont icon-weixuan"></i>手机验证</li>
                <li :class='step==1?"active":""'>
                    <i class="iconfont icon-weixuan"></i>设置密码</li>
                <li :class='step==2?"active":""'>
                    <i class="iconfont icon-weixuan"></i>注册完成</li>
            </ul>
        </div>
        <Row class="re-box">
            <Col span="8" offset="8">
            <Form v-if="step==0" ref='register1' :model="form" :rules="rules" :label-width="80" label-position="right">
                <FormItem label="注册手机" prop="phone">
                    <Row>
                        <Col span="16">
                        <Input v-model.trim="form.phone" placeholder="请输入手机号"></Input>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label="图形验证码" prop="verifyImgCode">
                    <Row>
                        <Col span="16">
                        <Input v-model.trim="form.verifyImgCode" placeholder="请输入图形验证码"></Input>
                        </Col>
                        <Col span="8">
                        <a class="valid-img" @click="verifyCodeImgClick++">
                            <img :src="verifyCodeImg" />
                        </a>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label="校验码" prop="verifyCode">
                    <Row>
                        <Col span="16">
                        <Input v-model.trim="form.verifyCode" placeholder="请输入校验码">
                        </Input>
                        </Col>
                        <Col span="8">
                        <a class="yzm" v-if="yzm" @click="getSmsCodeForSignUp" :disabled="form.phone==''||form.verifyImgCode==''">获取校验码</a>
                        <a class="yzm" v-else disabled>{{count1}}s后重发</a>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem>
                    注册即同意
                    <span class="link-span" @click="getProtocol('05')">《用户注册协议》</span>
                    <span class="link-span" @click="getProtocol('02')">《隐私条款》</span>
                </FormItem>
                <FormItem>
                    <Button type="primary" class="reg-btn" @click="checkSmsCodeForSignUp">下一步</Button>
                </FormItem>
                <FormItem>
                    <div class="other-link">
                        已有账号
                        <nuxt-link to="/login">登录</nuxt-link>
                    </div>
                </FormItem>
            </Form>
            <Form v-show="step==1" ref="register2" :rules="rules" :model="registerform" :label-width="80" label-position="right">
                <FormItem label='登录密码' prop="password">
                    <Row>
                        <Col span="16">
                        <Input v-model="registerform.password" placeholder="请输入新密码" type="password"></Input>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label='确认密码' prop="conformPassword">
                    <Row>
                        <Col span="16">
                        <Input v-model="registerform.conformPassword" placeholder="请再次输入新密码" type="password"></Input>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem>
                    <Button type="primary" class="reg-btn" @click="setPasswordForSignUp">下一步</Button>
                </FormItem>
            </Form>
            <div v-if="step==2" class="re-sucess">
                <h3>账号已开通</h3>
                <i class="iconfont icon-xiaolian"></i>
                <p>
                    您的帐号于已{{creattime|formatDate('yyyy年MM月dd日')}}注册成功，
                    <br/> 系统将在
                    <span>{{count}}</span>秒后自动跳转至首页，或点此
                    <a href="/">首页</a>
                </p>
            </div>
            </Col>
        </Row>

        <!-- <div class="footdeep">
            <div class="dev-width qualifications">
                <p class="w184">
                    <a href="http://www.miitbeian.gov.cn/state/outPortal/loginPortal.action" target="苏ICP备16066286号">苏ICP备16066286号</a>
                </p>
                <p class="w430">
                    信息产业部备案系统网址
                    <a href="http://www.jstec.com.cn/">www.jstec.com.cn</a>
                </p>
                <p class="w396">
                    Copyright ©2017江苏省技术产权交易市场有限公司
                </p>
            </div>
        </div> -->
        <Modal class="confirm-dialog" v-model="isVisble" width="650" :style="{top:'82px'}" :mask-closable="false" :closable="false">
            <div slot="header">
                <strong>{{portocol.title}}</strong>
            </div>
            <div>
                <div style="text-align:right;font-size:12px;margin-right:10px">
                    {{portocol.version}}发布于:{{portocol.createTime|formatDate('yyyy-MM-dd')}}
                </div>
                <div class="portal-content" v-html="portocol.content">
                </div>
            </div>
            <div slot="footer" style="display:block;text-align:center;padding:10px">
                <Button class="center" @click="isVisble=false">关闭</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import portal from "~/net/portal"
import { requiredInput, phoneReg, password } from '~/constant/validform'
export default {
    layout: 'onlyHeader',
    head() {
        return {
            title: '用户注册'
        }
    },
    data() {
        return {
            step: 0,
            form: {
                phone: '',
                verifyImgCode: '',
                verifyCode: ''
            },
            registerform: {
                password: '',
                conformPassword: ''
            },
            rules: {
                phone: [{
                    required: true,
                    trigger: "change",
                    validator: (rule, value, callback) => {
                        if (!value) {
                            callback(new Error("请输入手机号码"));
                        } else if (!phoneReg.test(value)) {
                            callback(new Error("手机号码无效"));
                        } else {
                            portal.isPhoneExist({
                                query: { phone: this.form.phone }
                            }).then((res) => {
                                if (res.data == true) {
                                    callback(new Error('该手机号已存在'));
                                } else {
                                    callback();
                                }
                            })
                                .catch(() => {
                                    callback();
                                })
                        }
                    }
                }],
                verifyImgCode: requiredInput('请输入验证码'),
                verifyCode: requiredInput('请输入验证码'),
                password: password(),
                conformPassword: [{
                    required: true,
                    trigger: "change",
                    validator: (rule, value, callback) => {
                        if (!value) {
                            callback(new Error('请再次输入密码'))
                        } else if (value !== this.registerform.password) {
                            callback(new Error('密码输入不一致'))
                        } else {
                            callback()
                        }
                    }
                }]
            },
            verifyCodeImgClick: 0,
            randomCode: '',
            creattime: new Date(),
            count: '',
            count1: '',
            timer: null,
            timer1: null,
            yzm: true,
            isVisble: false,
            portocol: {}
        }
    },
    computed: {
        verifyCodeImg() {
            return "/portal/getCaptchaCode?" + this.verifyCodeImgClick
        }
    },
    methods: {
        getSmsCodeForSignUp() {
            portal.getSmsCodeForSignUp({
                query: {
                    phone: this.form.phone,
                    imgVerifyCode: this.form.verifyImgCode,
                }
            }).then((res) => {
                this.yzm = false;
                this.countdown();
                this.$Message.success('验证码已发送到您的手机');
            }).catch(() => {
                this.verifyCodeImgClick++;
            })
        },
        checkSmsCodeForSignUp() {
            this.$refs.register1.validate((valid) => {
                if (valid) {
                    portal.checkSmsCodeForSignUp({
                        query: {
                            phone: this.form.phone,
                            imgVerifyCode: this.form.verifyImgCode,
                            smsVerifyCode: this.form.verifyCode
                        }
                    }).then((res) => {
                        this.randomCode = res.data;
                        this.step = 1;
                    }).catch(() => {
                        this.verifyCodeImgClick++;
                    })
                }
            })
        },
        //注册
        setPasswordForSignUp() {
            this.$refs.register2.validate((valid) => {
                if (valid) {
                    {
                        portal.setPasswordForSignUp({
                            body: this.registerform,
                            query: {
                                randomCode: this.randomCode
                            }
                        }).then((res) => {
                            this.step = 2;
                            this.redirectToHome();
                        })
                    }
                }
            })
        },
        redirectToHome() {
            let TIME_COUNT = 3;
            if (!this.timer) {
                this.count = TIME_COUNT;
                this.show = false;
                this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= TIME_COUNT) {
                        this.count--;
                    } else {
                        clearInterval(this.timer);
                        this.timer = null;
                        window.location.href = "/"
                    }
                }, 1000)
            }
        },
        countdown() {
            let TIME_COUNT = 60;
            if (!this.timer1) {
                this.count1 = TIME_COUNT;
                this.show = false;
                this.timer1 = setInterval(() => {
                    if (this.count1 > 0 && this.count1 <= TIME_COUNT) {
                        this.count1--;
                    } else {
                        this.yzm = true
                    }
                }, 1000)
            }
        },
        async getProtocol(portocalType) {
            let resp = await portal.getProtocol({
                query: { type: portocalType }
            });
            if (resp.code == '0000') {
                this.isVisble = true
                this.portocol = resp.data
                this.portocol.title = portocalType == '02' ? '用户隐私条款' : '用户注册协议'
            }
        }
    }
}
</script>
<style lang="less">
.register {
  .re-menu {
    width: 100%;
    height: 38px;
    background: #f4f9ff;
    border: 1px solid #e6edf5;
  }
  .re-menu ul li {
    float: left;
    width: 328px;
    background: #f4f9ff;
    border-right: 1px solid #e6edf5;
    height: 100%;
    text-align: center;
    line-height: 38px;
    font-size: 14px;
    color: #999;
  }
  .re-menu ul li i {
    margin-right: 10px;
    font-size: 16px;
    color: #d7dce2;
  }
  .re-menu ul li i.icon-Success-Small {
    color: #7ed321;
  }
  .re-menu ul li.active {
    background: #4285f4;
    color: #fff;
  }
  .re-box {
    margin-top: 100px;
    .valid-img img {
      width: 108px;
      height: 35px;
      border: 0;
    }
    .other-link a {
      color: #4285f4;
    }
    .reg-btn {
      width: 220px;
      height: 40px;
      text-align: center;
      color: #fff;
      background: #4285f4;
      border: 0;
      font-size: 14px;
      cursor: pointer;
    }
    .yzm {
      width: 100px;
      height: 35px;
      background-color: #4285f4;
      color: #fff;
      line-height: 35px;
      text-align: center;
      cursor: pointer;
      display: block;
      &:hover {
        color: #fff;
      }
      &[disabled] {
        color: white;
        background: #999999;
      }
    }
    .link-span {
      color: #4285f4;
      cursor: pointer;
    }
  }
  .re-sucess {
    text-align: center;
    margin: 0 auto;
    margin-left: 100px;
    h3 {
      font-size: 18px;
      color: #333333;
      text-align: center;
    }
    .icon-xiaolian {
      color: #73cd1f;
      display: block;
      font-size: 40px;
      margin: 0 0 17px;
    }
    p {
      font-size: 12px;
      color: #666;
      text-align: center;
      line-height: 17px;
      span {
        color: #f39800;
      }
    }
  }
  .footdeep {
    background: white;
    width: 100%;
    position: absolute;
    bottom: 0;
    p {
      font-size: 12px;
      color: #666;
      opacity: 0.45;
      line-height: 44px;
      margin-right: 62px;
      float: left;
      a {
        color: #666;
      }
    }
  }
}
</style>